<template>
  <jl-base>

    <jl-header>
      <mt-header title="工程交资料-制单" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <mt-navbar v-model="selected">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>


      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">

          <div class="w12">
            <div class="dld_body mt10">
              <jl-from-query label="工程登录单号"
                             required
                             :text="formData.GCDLD01"
                             type="function"
                             :function="callbackDld"
                             @ok="chooseGCDH">
                <div class='jl_form'>
                  <div class='jl_form_item bor_bottom'>
                    <span class='w06'>{GCDLD01}</span>
                    <span class='w06'>{JXSMC}</span>
                    <span class='w06'>{YHLXR}</span>
                    <span class='w06'>{YHDH}</span>
                    <span class='w12'>{SYDWDZ}</span>
                    <i class='fa fa-angle-right'></i>
                  </div>
                </div>
              </jl-from-query>
              <jl-from-input label="经销商" required disabled v-model="formData.JXSMC"/>
              <jl-from-datepicker label="合同签订时间" required v-model="formData.HTQDRQ"/>
              <jl-from-datepicker label="竣工时间" required v-model="formData.JGSJ"/>
              <jl-from-datepicker label="收单时间" required v-model="formData.SDSJ"/>
              <jl-images label="发票照片" upload required v-model="formData.FJFPZP"/>
              <jl-images label="工程照片" upload required v-model="formData.FJGCZP"/>
              <jl-images label="验收明细照片" upload v-model="formData.YSMXBZP"/>
              <jl-images label="竣工审核照片" upload required v-model="formData.JGYSSHB"/>
              <!--              <jl-images upload label="合同附件" v-model="formData.HTSCFJ"/>-->
              <jl-from-input label="资料审核编号" disabled v-model="formData.ZLSHBH"/>
            </div>

            <div class="dld_body mt10">
              <jl-from-input label="用户联系人" required v-model="formData.YHXM"/>
              <jl-from-input label="用户手机" required v-model="formData.YHDH"/>
              <jl-from-input label="联系固定电话" v-model="formData.LXDH"/>
              <jl-from-textarea placeholder="备注" v-model="formData.BZ"/>
            </div>
          </div>

        </mt-tab-container-item>


        <mt-tab-container-item id="goods">
          <div>
            <template v-for="(item,index) in formData.SPLB">
              <div class="w12">
                <div class="dld_title"><span>商品信息({{index+1}})</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
                </div>
                <div class="dld_body">
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w04"><em class="font_red">*</em>分销单号</span>
                      <span class="w08 tr">{{item['JLWBDH']}}</span>
                    </div>
                  </div>
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w04"><em class="font_red">*</em>商品名称</span>
                      <span class="w08 tr">{{item['GCSPMC']}}</span>
                    </div>
                  </div>
                  <div class="jl_input">
                    <div class="jl_input_item pr10 bor_bottom">
                      <span class="w08">
                        <em class="font_red">*</em>申请数量
                      </span>
                      <nut-stepper
                        :value.sync="item.BCZLSL"
                        :min="1"
                      ></nut-stepper>
                    </div>
                  </div>
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w03">批复单价:</span>
                      <span class="w03">{{item['PFDJ'] | money }} </span>
                      <span class="w03">批复金额:</span>
                      <span class="w03">{{item['PFJE'] | money}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>

    </jl-content>


    <jl-footer>
      <template v-if="selected == 'goods'">
        <div class="dld_title" style="background-color: #f1f1f1;"><span>合计：{{formData.SPLB.length}}件商品。</span></div>
      </template>
      <div class="footer_btn pr20 pl20">
        <button class="w12 ml0" @click="save">提交</button>
      </div>
    </jl-footer>

  </jl-base>
</template>

<script>

  import Goods from '../start/StartGoods'

  export default {
    components: {Goods},
    data() {
      return {
        selected: 'base',
        formData: {
          GCDLD01: '',
          JXSMC: '',
          HTSCFJ: [],
          SPLB: [],
          JGSJ: '',
          HTQDRQ: '',
          SDSJ: '',
          YHDH: '',
          YHXM: '',
          LXDH: '',
          FJFPZP: [],
          FJGCZP: [],
          YSMXBZP: [],
          JGYSSHB: [],
          ZLSHBH: '',
          BZ: '',
          jlbh: 0,
          bdbh: '1046',
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      save() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(action => {
          $Utils.loading();
          this.$engineer.startData(this.formData).then(v => {
            this.back();
            $Utils.hideloading()
          }).catch(e => {
            $Utils.hideloading()
          })
        }).catch(e => {
        })
      },
      chooseGCDH(item) {
        //$Utils.loading();
        let userInfo = $Utils.getUserInfo();
        this.http.post('/api/queryGCDLD/GCJZLgetGCDLD.do', {
          XmlData: {
            'GSXX01': userInfo.PCRM_GSXX01,
            'GCDLD01': item.GCDLD01,
          }
        })
          .then(v => {
            $Utils.hideloading();
            let data = v.data.resultlist[0];
            if ($Utils.isNull(data)) {
              $Utils.MessageBox.confirm('该登录单已被其它交资料制单的单据占用!')
              return;
            }
            Object.assign(this.formData, data);
          })
          .catch(e => {
            $Utils.hideloading();
          })
      },
      callbackDld() {
        let userInfo = $Utils.getUserInfo();
        return this.http.post('/api/queryGCDLD/getGCJZLCZ.do', {
          XmlData: {
            'GSXX01': userInfo.PCRM_GSXX01,
          }
        })
      },
      initData() {
        this.http.find("SCM_GCJZL", {
          GCDLD01: this.formData.GCDLD01,
          bdbh: this.formData.bdbh,
          jlbh: this.formData.jlbh,
        })
          .then(v => {
            if ($Utils.isNull(v)) return;
            let formData = v['0'];
            formData['SPLB'] = formData["LX"];
            delete formData['LX'];
            Object.assign(this.formData, formData);
            this.$forceUpdate();
          })
      }
    },
    created() {
      if (!$Utils.isNull(this.$route.params.item)) {
        this.formData.jlbh = this.$route.params.item['JLBH'];
        this.formData.GCDLD01 = this.$route.params.item['GCDLD01'];
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style scoped>

</style>
